<template>
  <div>
    <form>
      <div class="placeholder">
        <el-button
          text
          @click="dialogVisible = true"
          style="background: #00b7ee"
        >
          上传图片
        </el-button>
      </div>

      <div class="el-upload__tip">请上传图片，且确保图片内容清晰可见</div>
      <!-- 关键代码在这里，这段代码是将list-type="picture"的时候显示出来的缩略图的代码复制出来修改的 这里无法覆盖原来的picture，所有    在ul里面加了一个show的类名，然后在样式里面将原来的隐藏了-->
      <ul class="el-upload-list el-upload-list--picture show">
        <li
          :key="index"
          v-for="(item, index) in onshow"
          class="el-upload-list__item is-success"
          tabindex="0"
        >
          <!--scanBigImg：查看大图的方法  -->
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div>
              <img
                style="cursor: pointer"
                class="el-upload-list__item-thumbnail"
                :src="item.url"
              />
            </div>
            <span>图片名：{{ item.name }}</span>
            <span>类型：{{ item.type }}</span>
            <span>大小：{{ Math.round(item.size / 1024) }}k</span>

            <button style="width:30% margin: 23px" @click="handleDelete(index)">
              删除
            </button>
          </div>
        </li>
      </ul>
      <el-pagination
        :page-size="10"
        :total="uploadFileList.length"
        layout="prev, pager, next"
        @current-change="changePage"
      >
      </el-pagination>
    </form>

    <el-dialog
      v-model="dialogVisible"
      title="上传"
      width="60%"
      :before-close="handleClose"
    >
      <div class="placeholder">
        <div class="webuploader-pick">
          <input
            type="file"
            name="file"
            @change="show()"
            id="file1"
            ref="fileInput"
            :multiple="true"
          />
          选择图片
        </div>

        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          :multiple="true"
        >
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="
              dialogVisible = false;
              cancel();
            "
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="
              dialogVisible = false;
              submit();
            "
          >
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import axios from "../api/axios";

export default {
  data() {
    return {
      dialogVisible: false,
      file: new FileReader(),
      filename: "",
      formData: new FormData(),
      fileList: [],
      uploadFileList: [],
      onshow: [],
      page: 1,
    };
  },
  methods: {
    show() {
      var file1 = this.$refs.fileInput;
      console.log(file1.files);
      var files = file1.files;
      for (var i = 0; i < files.length; i++) {
        var file = files[i]; // 存储当前正在处理的文件
        console.log(file.name);
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = ((file) => {
          return (e) => {
            console.log(file.name);
            this.fileList.push({
              name: file.name,
              url: e.target.result,
              size: file.size,
              type: file.type,
              status: "finished",
            });
            this.url = e.target.result;
          };
        })(file);
      }

      this.formData.append("file", file1.value);

      this.filename = files.name;
    },

    async submit() {
      console.log(this.formData.get("file"));
      const res = await axios.post("/upload", {
        file: this.formData.get("file"),
      });
      if (res == false) {
        alert("用户信息错误");
      } else {
        alert("上传成功");

        this.uploadFileList.push.apply(this.uploadFileList, this.fileList);
        this.fileList = [];
        this.onshow = this.uploadFileList.slice(
          (this.page - 1) * 10,
          this.page * 10
        );
      }
    },
    cancel() {
      this.fileList = [];
    },
    handleDelete(index) {
      this.uploadFileList.splice((this.page - 1) * 10 + index, 1);
      this.onshow.splice(index, 1);
      this.onshow = this.uploadFileList.slice(
        (this.page - 1) * 10,
        this.page * 10
      );
    },
    changePage(page) {
      console.log(page);
      this.page = page;
      this.onshow = this.uploadFileList.slice((page - 1) * 10, page * 10);
    },
  },
};
</script>

<style>
.placeholder {
  border: 3px dashed #e6e6e6;
  min-height: 238px;
  padding-top: 158px;
  text-align: center;
  color: #cccccc;
  font-size: 18px;
  position: relative;
}
.webuploader-pick {
  font-size: 18px;
  background: #00b7ee;
  border-radius: 3px;
  line-height: 44px;
  padding: 0 30px;
  color: #fff;
  display: inline-block;
  margin: 20px auto;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.webuploader-pick {
  position: relative;
  display: inline-block;
  background: #00b7ee;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 10px 18px;
  overflow: hidden;
  color: white;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
  font-size: 12px;
  cursor: pointer;
}
.webuploader-pick input {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  padding: 10px 18px;
  cursor: pointer;
}
.webuploader-pick:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: red;
  text-decoration: none;
}
</style>